<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/ztree/css/ztree-bootstrap.css"/>
    <script src="/jquery/jquery.min.js"></script>
    <script src="/layer/layer.js"></script>
    <style>
        .custom-layui-button{
            height: 21px;
            line-height: 21px;
            padding: 0px 7px;
            font-size: 12px;
        }
        .custom-disabled{
            background-color: #eee !important;
            opacity: 1 !important;
        }
    </style>

</head>

<style>
    .searchdiv{
        background: #fff;
        border-radius: 6px;margin-top: 10px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
        padding: 10px;
    }
</style>

<body style="background-color: #f3f3f4; height: 700px;">

    <div class="searchdiv">
        <button class="layui-btn layui-btn-normal" id="addPermission">新增</button>
        <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
    </div>

    <div id="tyes" style="display: none;">
        <form class="layui-form" id="editform" style="padding: 17px 10px 0px 24px;" action="">
            <div class="layui-inline custom-inline" >
                <div class="layui-input-block custom-radios">
                    <input type="radio" name="type"  value="0" title="目录" lay-filter="radio" >
                    <input type="radio" name="type"  value="1"   title="菜单" lay-filter="radio" checked>
                    <input type="radio" name="type"  value="2"   title="按钮" lay-filter="radio">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">资源名称 :</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">上级资源 :</label>
                    <div class="layui-input-block ">
                        <input type="text" id="parentResource" value="顶级菜单" lay-verify="required"  class="layui-input custom-disabled parentResource" readonly>
                        <input type="hidden" name="parentId" id="parentId" value="0"> <!--父亲隐藏域标签-->
                    </div>
                </div>

                <div class="layui-form-item" id="formUrl">
                    <label class="layui-form-label">资源url :</label>
                    <div class="layui-input-block">
                        <input type="text"  name="url"  lay-verify="required" placeholder="请输入"  class="layui-input">
                    </div>
                </div>

                <div  class="layui-form-item" id="formPerms">
                    <label class="layui-form-label">资源标识 :</label>
                    <div class="layui-input-block">
                        <input type="text"   name="perms"  lay-verify="required" placeholder="请输入"  class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item" id="formSort">
                    <label class="layui-form-label">排序 :</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNum"  lay-verify="required" placeholder="请输入"  class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item" id="formIcon">
                    <label class="layui-form-label">图标 :</label>
                    <div class="layui-input-block">
                        <input type="text"   name="icon"  lay-verify="required" placeholder="请输入"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">描述 :</label>
                    <div class="layui-input-block">
                        <input type="text" name="description"   lay-verify="required" placeholder="请输入"  class="layui-input">
                    </div>
                </div>
            </div>
        </form>
    </div>
<script src="js/jquery.min.js"></script>
<script src="/layui/layui.all.js" charset="utf-8"></script>
<script src="/layui/extend/treeTable.js" charset="utf-8"></script>
<script>


    ;!function(){
        var o = layui.$,
            form = layui.form,
            layer = layui.layer,
            treeTable = layui.treeTable;


        $.ajax({
            url:"/selectPermissionAll",
            method:"get",
            dataType:"json",
            success:function(res){
                var	re = treeTable.render({
                    elem: '#tree-table',
                    data: res.data,
                    icon_key: 'name',
                    primary_key: 'id',
                    parent_key: 'parentId',
                    end: function(e){
                        form.render();
                    },
                    cols: [
                        {
                            key: 'name',
                            title: '菜单名称',
                            width: '200px',
                            align: 'center',
                        },
                        {
                            key: 'url',
                            title: '菜单URL',
                            align: 'center'
                        },
                        {
                            key: 'perms',
                            title: '权限标识',
                            align: 'center',
                            template: function(item){
                                if(item.perms == null){
                                    return "";
                                }else{
                                    return item.perms;
                                }
                            }
                        },
                        {
                            key: 'type',
                            title: '类型',
                            width: '100px',
                            align: 'center',
                            template: function(item){
                                if(item.type == 1){
                                    return "<span class=\"label label-success\">菜单</span>";
                                }else if(item.type==0){
                                    return "<span class=\"label label-primary\">目录</span>";
                                }else{
                                    return "<span class=\"label label-warning\">按钮</span>";
                                }
                            }
                        },{
                            key: 'orderNum',
                            title: '排序',
                            align: 'center'
                        }
                        ,
                        {
                            key: 'description',
                            title: '权限描述',
                            align: 'center'
                        },
                        {
                            title: '操作',
                            align: 'center',
                            template: function(item){
                                return '<a lay-filter="edit" class="layui-btn layui-btn-normal custom-layui-button" style="height: ;" >编辑</a> ' +
                                    ' <a  lay-filter="del" class="layui-btn layui-btn-danger custom-layui-button">删除</a>';
                            }
                        }
                    ]
                });


                treeTable.on('tree(edit)',function(data){

                    $("#tyes").load("/permission/edit?permissionId="+data.item.permissionId,function(response,status,xhr){
                        if (status=="success"){
                            top.layer.open({
                                type: 1,
                                btn: ['保存', '取消'],
                                area: '500px',
                                offset: '50px',
                                content: $('#tyes').html()
                                ,yes: function(index, layero){
                                    var pid = parent.$("#parentId").val();
                                    var id = data.item.id;

                                    if(pid == id){
                                        parent.layer.msg("不能选中自己,当上级资源请更换");
                                        return false; // 阻止往下冒泡
                                    }

                                    $.ajax({
                                        url:"/permission/edit",
                                        type:"post",
                                        data:parent.$("#editform").serialize(),
                                        dataType:"json",
                                        success:function(data){
                                            if(data.ret){
                                                parent.layer.msg("编辑成功!");
                                                parent.layer.close(index);
                                                location.reload();
                                            }
                                        },
                                        error:function(data){
                                            parent.layer.msg("系统错误")
                                        }
                                    })
                                },
                                success: function(layero, index){
                                    parent.layui.form.render();
                                }
                            });

                        }
                    });

                });



                treeTable.on('tree(del)',function(data){
                    $.ajax({
                        url:"/SelectCountPermissionId",
                        type:"get",
                        data:{
                            id:data.item.id
                        },dataType:"json",
                        success:function(res){
                           if(res.ret){
                               if(res.data >0){
                                   layer.msg("你不可以删除,因为有他下面还有数据")
                               }else{
                                    parent.layer.confirm('真的删除行么', function(index){
                                       $.ajax({
                                           url:"/permission/del",
                                           data:{
                                               id: data.item.id
                                           },dataType:"json",
                                           success:function(delres){
                                               if(delres.ret){
                                                   location.reload();
                                                   parent.layer.msg("删除成功")
                                                   parent.layer.close(index);
                                               }
                                           }
                                       })
                                   });
                               }

                           }
                        }
                    })
                })
            }
        })


        $("#addPermission").on("click",function(){
            top.layer.open({
                type: 1,
                btn: ['保存', '取消'],
                area: '500px',
                offset: '50px',
                content: $('#tyes').html()
                ,yes: function(index, layero){
                    console.log(parent.$("#editform").serialize());
                    $.ajax({
                        url:" /permission/add",
                        type:"post",
                        data:parent.$("#editform").serialize(),
                        dataType:"json",
                        success:function(data){
                            if(data.ret){
                                parent.layer.close(index);
                                parent.layer.msg("添加成功");
                            }
                        },error:function(error){
                            parent.layer.close(index);
                            parent.layer.msg("系统错误！")
                        }
                    });



                },
                success: function(layero, index){
                    parent.layui.form.render();
                }
            });
        })

      /**
        *  动态监控  radio 的变化动态生成 dom
        */
      parent.layui.form.on('radio(radio)', function(data){
              // value="0" title="目录"
              // value="1"   title="菜单
              // value="2"   title="按钮
          if(data.value == 0){
              parent.$("#formPerms").hide(); //隐藏资源标识
              parent.$("#formPerms input").attr("disabled","true");
              parent.$("#formUrl").hide(); //隐藏资源Url
              parent.$("#formUrl input").attr("disabled","true");
              parent.$("#formIcon").show(); //隐藏资源图标
              parent.$("#formIcon input").removeAttr("disabled");
              parent.$("#formSort input").show(); //隐藏资源排序
              parent.$("#formSort").show();
              parent.$("#formSort input").removeAttr("disabled");
          }else if(data.value == 1){
              parent.$("#formPerms").show(); //隐藏资源标识
              parent.$("#formUrl").show(); //隐藏资源Url
              parent.$("#formIcon").show(); //隐藏资源标识
              parent.$("#formSort").show(); //隐藏资源Url

              parent.$("#formPerms input").removeAttr("disabled");
              parent.$("#formUrl input").removeAttr("disabled");
              parent.$("#formIcon input").removeAttr("disabled");
              parent.$("#formSort input").removeAttr("disabled");

          }else{
              parent.$("#formPerms").show(); //隐藏资源标识
              parent.$("#formUrl").show(); //隐藏资源Url
              parent.$("#formIcon").hide(); //隐藏资源标识
              parent.$("#formSort").hide(); //隐藏资源Url
              parent.$("#formPerms input") .removeAttr("disabled");
              parent.$("#formUrl input") .removeAttr("disabled");
              parent.$("#formIcon input").attr("disabled","true");
              parent.$("#formSort input").attr("disabled","true");
          };
      });
    }();
</script>

</body>

</html>
